<template>
  <jke-modal
      :visible.sync="jkeForm.visible"
      :width="1200"
      :title="jkeForm.title"
      :fullscreen.sync="jkeForm.fullscreen"
      :switchFullscreen="jkeForm.switchFullscreen"
    >
    <!--  -->
    <crumbs @goBack="goBack" :superiorMenu="['技术管理', '生产工序']" :currentMenu="jkeForm.title"></crumbs>
    <div class="form-body">
      <a-card title="基础信息" :bordered="false" style="margin-top: 12px">
        <a-form :form="form" @submit="handleSubmit" layout="vertical">
          <!-- <a-form-item label="工序编号" required>
          <a-input v-decorator="['processCode']" placeholder="不输入则自动生成" />
        </a-form-item> -->
          <a-form-item label="工序编号">
            <a-input
              v-decorator="[
                'processCode',
                {
                  rules: [
                    {
                      required: false,
                      message: '请输入工序编号或自动生成',
                    },
                    {
                      message: '该值不可用，系统中已存在！',
                      validator: (rule, value, callback) =>
                        validateDuplicateValue('mess_product_process', 'process_code', value, queryId, callback),
                    },
                  ],
                },
              ]"
              placeholder="不输入则自动生成"
              :maxLength="14"
              :disabled="isEdit"
            />
            <span class="btn-text code-btn" v-if="!isEdit" @click="genEntityCode">自动生成</span>
          </a-form-item>
          <a-form-item label="工序名称">
            <a-input
              v-decorator="['processName', { rules: [{ required: true, message: '请输入工序名称' }] }]"
              placeholder="请输入工序名称"
              :maxLength="30"
            />
          </a-form-item>
          <a-form-item label=""> </a-form-item>
        </a-form>
        <a-form :form="form" @submit="handleSubmit" layout="vertical">
          <a-form-item label="质检专检工序">
            <a-select
              v-decorator="['qualityTestProcess', { rules: [{ required: true, message: '请选择' }] }]"
              placeholder="请选择"
              :disabled="isEdit"
              allowClear
            >
              <a-select-option value="1">是</a-select-option>
              <a-select-option value="2">否</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label=""> </a-form-item>
          <a-form-item label=""> </a-form-item>
        </a-form>
      </a-card>
      <a-card title="参数信息" :bordered="false" style="margin-top: 12px">
        <a-form :form="form" @submit="handleSubmit" layout="vertical">
          <a-form-item label="报工单位">
            <a-select
              :disabled="isEdit"
              v-decorator="['processWorkUnit', { rules: [{ required: true, message: '请选择报工单位' }] }]"
              placeholder="请选择"
              allowClear
            >
              <a-select-option :value="undefined">请选择</a-select-option>
              <a-select-option v-for="(item, key) in dictOptions" :key="key" :value="item.value">
                <span style="display: inline-block; width: 100%" :title="item.text || item.label">
                  {{ item.text || item.label }}
                </span>
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="超量报工">
            <a-input
              suffix="%"
              v-decorator="[
                'excessWorkRate',
                { rules: [{ required: false, message: '请输入超量报工' }, { validator: validateToRate }] },
              ]"
              placeholder="请输入"
              @input="(e) => inputRate(e)"
            />
          </a-form-item>
          <a-form-item label=""> </a-form-item>
        </a-form>
        <a-form :form="form" @submit="handleSubmit" layout="vertical">
          <a-form-item label="工序要求" style="width: 65%">
            <a-input :maxLength="500" v-decorator="['processRequire']" placeholder="请输入" />
          </a-form-item>
          <a-form-item label=""> </a-form-item>
        </a-form>
      </a-card>
      <a-card title="其他信息" :bordered="false" style="margin: 12px 0 24px">
        <a-form :form="form" @submit="handleSubmit" layout="vertical">
          <a-form-item label="备注" style="flex: 1">
            <a-textarea placeholder="请输入" :maxLength="500" auto-size v-decorator="['remark']" />
          </a-form-item>
        </a-form>
        <a-form layout="vertical">
          <a-form-item label="附件" style="flex: 1">
            <file-upload :ids="attachment" @getFileList="getFileList"></file-upload>
            <p style="line-height: 30px;color:#8d8d8d;">最多上传5个文件，每个大小不可超过20M</p>
          </a-form-item>
        </a-form>
      </a-card>
    </div>
    <div class="footer-submit form-footer">
      <a-button @click="goBack" class="submitBtn" style="margin-right: 10px"> 取消 </a-button>
      <a-button type="primary" :loading="loadingSubmit" class="submitBtn" @click="handleSubmit"> 提交 </a-button>
    </div>
  </jke-modal>
</template>
<script>
import { FormTypes } from '@/utils/JEditableTableUtil'
import crumbs from '@/components/crumbs.vue'
import { productProcessAdd, getDictModel, productProcessEdit, productProcessQueryById } from '@/api/goodsManagement'
import FileUpload from '@/components/fileActions/FileUpload.vue'
import { API } from '@/api/requestFzs'
import { validateDuplicateValue, clearNoNum } from '@/utils/util'
export default {
  name: 'workProcessForm', //新增生产工序
  data() {
    return {
      jkeForm: {
        title: '新建工序',
        visible: false,
        fullscreen: true,
        switchFullscreen: true,
      },
      validateDuplicateValue, //自动生成编码
      queryId: '',
      loadingSubmit: false, //防止多次提交
      submitApi: productProcessAdd,
      isEdit: false,
      dictOptions: '', //报工单位
      attachment: '', //附件
      formLayout: 'horizontal',
      form: this.$form.createForm(this, { name: 'coordinated' }),
    }
  },
  components: {
    FileUpload,
    crumbs,
  },
  computed: {
    formDisabled() {
      if (this.formBpm === true) {
        if (this.formData.disabled === false) {
          return false
        }
        return true
      }
      return this.disabled
    },
  },
  methods: {
    // 格式化超量报工
    inputRate(e) {
      this.form.setFieldsValue({
        excessWorkRate: clearNoNum(e.target.value),
      })
    },
    /* 超量报工校验大于0 */
    validateToRate(rule, value, callback) {
      if (!value) {
        callback()
      }
      if (/[1-9]+[0-9]*/.test(value)) {
        callback()
      } else {
        callback('超量报工必须大于0')
      }
    },
    /* 自动生成 */
    genEntityCode() {
      API.genEntityCode({ entityCode: 'MESS_PRODUCT_PROCESS' }).then((res) => {
        if (res.code == 200) {
          this.form.setFieldsValue({
            processCode: res.result,
          })
        } else {
          this.$antdMessage.error(res.message)
        }
      })
    },
    /* 获取编辑详情 */
    initForm(id) {
      Object.assign(this.$data, this.$options.data.call(this));
      this.jkeForm.visible = true
      this.queryId = id
      this.getdata()
      if (id) {
        this.jkeForm.title = '编辑工序'
        this.submitApi = productProcessEdit
        this.isEdit = true
        productProcessQueryById({ id: id }).then((res) => {
          if (res.code == 200) {
            this.form.setFieldsValue(res.result)
            this.attachment = res.result.attachment
          }
        })
      } else {
        this.form.setFieldsValue({
          qualityTestProcess: '2',
        })
        this.jkeForm.title = '新建工序'
      }
    },
    getdata() {
      // 报工单位下拉字典数据
      getDictModel({ dictCode: 'wms_goods_unit' }).then((res) => {
        this.dictOptions = res.result
      })
    },
    /* 面包屑返回 */
    goBack() {
      this.jkeForm.visible = false
    },
    /* 获取附件 */
    getFileList(v) {
      this.attachment = v
      console.log('上传的附件id：', v)
    },
    // 提交
    handleSubmit() {
      this.form.validateFields((err, values) => {
        if (!err) {
          let parameters = {
            ...values,
            attachment: this.attachment,
          }

          if (this.isEdit) {
            parameters.id = this.queryId
          }
          
          this.loadingSubmit = true
          this.submitApi(parameters).then((res) => {
            if (res.code == 200) {
              this.loadingSubmit = false
              let subMsg = this.isEdit ? '工序编辑成功！' : '工序创建成功！'
              this.$antdMessage.success(subMsg)
              this.$emit('refresh')
              this.goBack()
            } else {
              this.loadingSubmit = false
              this.$antdMessage.error(res.message)
            }
          })
        }
      })
    },
  },
}
</script>
<style scoped lang="less">
@import '~@/assets/less/public.less';
.flex(@jc,@ai,@fd:row) {
  display: flex;
  justify-content: @jc;
  align-items: @ai;
  flex-direction: @fd;
}
/deep/.ant-form-vertical {
  display: flex;
  justify-content: space-between;
  .ant-form-item {
    width: 30%;
  }
}
.form-body {
  height: calc(100vh - 100px);
  overflow-y: scroll;
}
.form-footer {
  position: absolute;
  left: 0;
  bottom: 0;
}
.submitBtn {
  .flex(flex-end, center);
  padding: 8px;
}
.code-btn {
  position: absolute;
  right: 0;
  top: -34.5px;
}
</style>
